<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>非组件化编程-普通方式</title>
  </head>
  <body>
  <div id="app">
    <button v-on:click="click()">点击次数={{count}}(非组件化方式)</button><br/>
      <!--需求:有多个按钮都要进行点击统计
        1.多个按钮界面其实一样,但是都重新创建了一份,复用性很差
        2.可以使用组件化编程解决
      -->
    <button v-on:click="click2()">点击次数={{count2}}(非组件化方式)</button>

  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data: { //data数据池
        count:0,
        count2:0
      },
      methods:{
        click() {
          this.count++;
        },
        click2() {
          this.count2++;
        }
      }
    })
  </script>
  </body>
</html>